<template>
  <div class="Goods">
    <!--第一个table表格-->
    <div class="Goods-hypermarket">
      <p>商城热销商品排行</p>
      <div class="hypermarket-news">
        <div class="otherbutton01">
          <ul>
            <li
              class="aa"
              :class="{red:onchangeRed == index}"
              @click="change1(index)"
              v-for="(list,index) in siYuan01"
              :key="index"
            >{{list.a1}}</li>
          </ul>
        </div>
        <div class="hypermarket-table">
          <el-table
            :data="tableData01"
            style="width: 100%"
            :default-sort="{prop: 'date', order: 'descending'}"
            size="mini"
          >
            <el-table-column
              type="index"
              :index="indexMethod"
              label="排名"
              width="100"
              show-overflow-tooltip
              align="center"
            ></el-table-column>
            <el-table-column prop="goodsName" label="商品" show-overflow-tooltip width align="center"></el-table-column>
            <el-table-column prop="priceType" label="类型" width align="center"></el-table-column>
            <el-table-column prop="volume" label="成交量" sortable width align="center"></el-table-column>
            <el-table-column
              prop="transactionAmount"
              label="成交金额"
              align="center"
              width="120"
            ></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="timemark" v-if="timeone">
        <div class="block">
          <p>组件值：{{ value11 }}</p>
          <el-date-picker
            id="timeitemlist"
            v-model="value11"
            type="daterange"
            size="mini"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            @change="pickerone"
          ></el-date-picker>
        </div>
      </div>
    </div>
    <!-- 第二个table表格 :default-time="['00:00:00', '23:59:59']" -->
    <div class="Goods-hypermarket">
      <p>商城滞销商品排行</p>
      <div class="hypermarket-news">
        <div class="otherbutton02">
          <ul>
            <li
              class="aa"
              :class="{red:onlistchangeRed == index}"
              @click="change2(index)"
              v-for="(list,index) in siYuan02"
              :key="index"
            >{{list.a2}}</li>
          </ul>
        </div>
        <div class="hypermarket-table">
          <el-table
            :data="tableData02"
            style="width: 100%"
            :default-sort="{prop: 'date', order: 'descending'}"
            size="mini"
          >
            <el-table-column type="index" :index="indexMethod" label="排名" width="90" align="center"></el-table-column>
            <el-table-column
              prop="goodsName"
              label="商品"
              show-overflow-tooltip
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column prop="priceType" label="类型" align="center"></el-table-column>
            <el-table-column
              prop="volume"
              label="成交量"
              sortable
              width="90"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="transactionAmount"
              label="成交金额"
              align="center"
              width="110"
            ></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="timetwo" v-if="timetwo">
        <div class="block">
          <p>组件值：{{ value12 }}</p>
          <el-date-picker
            id="timeitemlist"
            v-model="value12"
            type="daterange"
            size="mini"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            @change="pickertwo"
          ></el-date-picker>
        </div>
      </div>
    </div>
    <!--第三个table表格-->
    <div class="Goods-hypermarket">
      <p>商城商品成交转化排行</p>
      <div class="hypermarket-news">
        <div class="otherbutton03">
          <ul>
            <li
              class="aa"
              :class="{red:onitemchangeRed == index}"
              @click="change3(index)"
              v-for="(list,index) in siYuan03"
              :key="index"
            >{{list.a3}}</li>
          </ul>
        </div>
        <div class="hypermarket-table">
          <el-table
            :data="tableData03"
            style="width: 100%"
            :default-sort="{prop: 'date', order: 'descending'}"
            size="mini"
          >
            <el-table-column type="index" :index="indexMethod" label="排名" width="90" align="center"></el-table-column>
            <el-table-column
              prop="goodsName"
              label="商品"
              show-overflow-tooltip
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column prop="priceType" label="类型" width="100" align="center"></el-table-column>
            <el-table-column prop="volume" label="成交量" sortable width align="center"></el-table-column>
            <el-table-column
              prop="transactionAmount"
              label="成交金额"
              align="center"
              width="100"
            ></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="timethree" v-if="timethree">
        <div class="block">
          <p>组件值：{{ value13 }}</p>
          <el-date-picker
            id="timeitemlist"
            v-model="value13"
            type="daterange"
            size="mini"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="pickerthree"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Goods",
  data() {
    return {
      tableData01: [],
      tableData02: [],
      tableData03: [],
      siYuan01: [
        { a1: "近7天排行" },
        { a1: "近30天排行" },
        { a1: "自定义时间" }
      ],
      siYuan02: [
        { a2: "近7天排行" },
        { a2: "近30天排行" },
        { a2: "自定义时间" }
      ],
      siYuan03: [
        { a3: "近7天排行" },
        { a3: "近30天排行" },
        { a3: "自定义时间" }
      ],
      onchangeRed: -1,
      onlistchangeRed: -1,
      onitemchangeRed: -1,
      value11: "",
      value12: "",
      value13: "",
      timeone: false,
      timetwo: false,
      timethree: false,
      index: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      }
    };
  },
  created() {
    this.change1(0);
    this.change2(0);
    this.change3(0);
  },
  mounted() {
    this.formatter();
    this.change1();
    this.change2();
    this.change3();
    this.indexMethod();
    this.pickerone();
    this.pickertwo();
    this.pickerthree();
  },
  methods: {
    formatter(row, column) {
      if (row !== undefined) {
        return row.money;
      }
    },
    indexMethod(index) {
      return index + 1;
    },
    change3(index) {
      this.onitemchangeRed = index;
      this.index = index;
      var _that = this;
      if (index == 2) {
        _that.timethree = true;
      } else {
        _that.timethree = false;
      }
      if (index == 0) {
        _that.timeRange = 1;
      }
      if (index == 1) {
        _that.timeRange = 2;
      }
      this.$http({
        url: this.$http.adornUrl("/home/queryConsumptionRanking"),
        method: "get",
        params: this.$http.adornParams(
          {
            timeRange: _that.timeRange,
            type: "3",
            sortType: true
          },
          false
        )
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            _that.tableData03 = data.data;
          }
        })
        .catch(err => {
          console.log(err, "商城热销商品排行加载失败");
        });
    },
    change2(index) {
      this.onlistchangeRed = index;
      this.index = index;
      var _that = this;
      if (index == 2) {
        _that.timetwo = true;
      } else {
        _that.timetwo = false;
      }
      if (index == 0) {
        _that.timeRange = 1;
      }
      if (index == 1) {
        _that.timeRange = 2;
      }
      this.$http({
        url: this.$http.adornUrl("/home/queryConsumptionRanking"),
        method: "get",
        params: this.$http.adornParams(
          {
            timeRange: _that.timeRange,
            type: "2",
            sortType: true
          },
          false
        )
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            _that.tableData02 = data.data;
          } else {
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    change1(index) {
      var _that = this;
      this.index = index;
      this.onchangeRed = index;

      if (index == 2) {
        _that.timeone = true;
      } else {
        _that.timeone = false;
      }

      if (index == 0) {
        _that.timeRange = 1;
      }
      if (index == 1) {
        _that.timeRange = 2;
      }
      this.$http({
        url: this.$http.adornUrl("/home/queryConsumptionRanking"),
        method: "get",
        params: this.$http.adornParams(
          {
            timeRange: _that.timeRange,
            type: "1",
            sortType: true
          },
          false
        )
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            _that.tableData01 = data.data;
          } else {
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    pickerthree(value13) {
      var _that = this
      if (this.index == 0) {
        _that.timeRange = 1;
      }
      if (this.index == 1) {
        _that.timeRange = 2;
      }
      if (this.index == 2) {
        _that.timeRange = value13[0] + "~" + value13[1];
      }

      this.$http({
        url: this.$http.adornUrl("/home/queryConsumptionRanking"),
        method: "get",
        params: this.$http.adornParams(
          {
            timeRange: _that.timeRange,
            type: "1",
            sortType: true
          },
          false
        )
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            _that.tableData03 = data.data;
          } else {
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    pickertwo(value12) {
      var _that = this;

      if (this.index == 0) {
        _that.timeRange = 1;
      }
      if (this.index == 1) {
        _that.timeRange = 2;
      }
      if (this.index == 2) {
        _that.timeRange = value12[0] + "~" + value12[1];
      }
      this.$http({
        url: this.$http.adornUrl("/home/queryConsumptionRanking"),
        method: "get",
        params: this.$http.adornParams(
          {
            timeRange: _that.timeRange,
            type: "1",
            sortType: true
          },
          false
        )
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            _that.tableData02 = data.data;
          } else {
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    pickerone(value11) {
      //第一个时间卡片
      var _that = this;

      if (this.index == 0) {
        _that.timeRange = 1;
      }
      if (this.index == 1) {
        _that.timeRange = 2;
      }
      if (this.index == 2) {
        _that.timeRange = value11[0] + "~" + value11[1];
      }
      this.$http({
        url: this.$http.adornUrl("/home/queryConsumptionRanking"),
        method: "get",
        params: this.$http.adornParams(
          {
            timeRange: _that.timeRange,
            type: "1",
            sortType: true
          },
        
        )
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            _that.tableData01 = data.data;
          } else {
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style lang="scss">
@import url("../../assets/scss/_shoppinggoods.scss");
.a {
  cursor: pointer;
}
.red {
  background: rgba(224, 224, 224, 1);
}
ul,
ol {
  list-style: none;
}
.otherbutton01 {
  width: 384px;
  height: 36px;
  background: linear-gradient(
    0deg,
    rgba(243, 243, 243, 1),
    rgba(255, 255, 255, 1)
  );
  border: 1px solid rgba(204, 204, 204, 1);
  border-radius: 2px;
  margin-left: 56px;
}
.otherbutton01 > ul {
  width: 100%;
  height: 100%;
}
.otherbutton01 > ul > li {
  width: 127px;
  height: 36px;
  float: left;
  line-height: 36px;
  text-align: center;
  border: 0;
}
.otherbutton02 {
  width: 384px;
  height: 36px;
  background: linear-gradient(
    0deg,
    rgba(243, 243, 243, 1),
    rgba(255, 255, 255, 1)
  );
  border: 1px solid rgba(204, 204, 204, 1);
  border-radius: 2px;
  margin-left: 56px;
}
.otherbutton02 > ul {
  width: 100%;
  height: 100%;
}
.otherbutton02 > ul > li {
  width: 127px;
  height: 36px;
  float: left;
  line-height: 36px;
  text-align: center;
  border: 0;
}
.otherbutton03 {
  width: 384px;
  height: 36px;
  background: linear-gradient(
    0deg,
    rgba(243, 243, 243, 1),
    rgba(255, 255, 255, 1)
  );
  border: 1px solid rgba(204, 204, 204, 1);
  border-radius: 2px;
  margin-left: 56px;
}
.otherbutton03 > ul {
  width: 100%;
  height: 100%;
}
.otherbutton03 > ul > li {
  width: 127px;
  height: 36px;
  float: left;
  line-height: 36px;
  text-align: center;
  border: 0;
}
.timemark {
  width: 496px;
  height: 390px;
  background: #eeeeee;
  margin-top: -390px;
  z-index: 2688;
}
.timemark > div {
  width: 496px;
  height: 390px;
}
.timemark > div > p {
  text-align: center;
  height: 27px;
  line-height: 27px;
}
.timeitemlist {
  width: 100%;
  background: gray;
}
.timetwo {
  width: 496px;
  height: 390px;
  background: #eeeeee;
  margin-top: -390px;
}
.timetwo > div {
  width: 496px;
  height: 390px;
}
.timetwo > div > p {
  text-align: center;
  height: 27px;
  line-height: 27px;
}
.timethree {
  width: 496px;
  height: 390px;
  background: #eeeeee;
  margin-top: -390px;
}
.timethree {
  width: 496px;
  height: 390px;
  background: #eeeeee;
  margin-top: -390px;
}
.timethree > div {
  width: 496px;
  height: 390px;
}
.timethree > div > p {
  text-align: center;
  height: 27px;
  line-height: 27px;
}
// .el-picker-panel el-date-range-picker el-popper {
//   width: 505px;
// }
</style>